<template>
    <div class="shuffling">
        <div class="top">
            <table class="topTableStyle">
                <tr>
                    <td class="topTableStyletd" style="width:5%;"><Button type="primary" @click="addShuffling">新增</Button></td>
                    <td colspan="7" style="width:81%;"></td>
                    <td class="topTableStyletd" style="width:5%; padding-right: 1%"><Button type="primary" @click="sortShuffling" style="width:100%">排序</Button></td>
                    <td class="topTableStyletd" style="width:8%;"><Button type="primary" @click="editShufflingKeepTime" style="width:100%; padding-left: 8px;  margin-right: 8px;">停留时间</Button></td>
                </tr>
            </table>
        </div>
        <div><hr></div>
        <!-- 表单数据显示 -->
        <Row class="bottom">
            <Table border :columns="shufflingTable" :data="shufflingTableData" :loading="loading" header="1213"></Table>
        </Row>
        <br>
        <!-- 页码 -->
        <Row style="text-align: right;margin:35px 0">
            <Page :total="shufflingTotal" :current="shufflingCurrent" show-total show-elevator show-sizer :page-size=shufflingPageSize @on-change="changePage" @on-page-size-change="changePageSize"></Page>
        </Row>
        <!-- 新增轮播图 -->
        <Modal v-model="addShufflingList" :mask-closable="false" title="新增" @on-ok="submitAddShuffling" @on-cancel="cancel">
            <table class="tablePup">
                <tr>
                    <td class="add-left">
                        <span style="color:red">*</span>
                        <span>序号：</span>
                    </td>
                    <td>
                        <Input :min="1" :max="9999" style="width: 200px" placeholder="请输入序号"></Input>
                    </td>
                </tr>
                <tr>
                    <td class="add-left">
                        <span style="color:red">*</span>
                        <span>标题：</span>
                    </td>
                    <td>
                        <Input v-model="value" placeholder="请输入标题" style="width: 200px"></Input>
                    </td>
                </tr>
                <tr>
                    <td class="add-left">
                        <span style="color:red">*</span>
                        <span>状态：</span>
                    </td>
                    <td>
                        <Select v-model="edit_shuffling_status" style="width:200px">
                            <Option v-for="item in shufflingStatus" :value="item.status" :key="item.status" @on-change="shufflingStatusChange()"></Option>
                        </Select>
                    </td>
                </tr>
                <tr>
                    <td class="add-left">
                        <span style="color:red">*</span>
                        <span>封面图片：</span>
                    </td>
                    <td>
                        <div>
                            <div class="demo-upload-list" v-show="item.url.length > 1" v-for="item in uploadList">
                                <!-- <img :src=item.url> -->
                                <img :src=item.url>
                                <div class="demo-upload-list-cover">
                                    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                                </div>
                            </div>
                            <Upload 
                            ref="upload"
                            :show-upload-list="false" 
                            :on-success="handleSuccess"
                            :format="['jpg','jpeg','png']" 
                            :max-size="5120" 
                            :before-upload="handleBeforeUpload" 
                            :on-format-error="handleFormatError" 
                            :on-exceeded-size="handleMaxSize"
                            multiple 
                            type="drag" 
                            action="http://10.20.5.110:8088/sport/admin/uploadPicture" 
                            style="display: inline-block;width:58px;">
                                <div style="width: 58px;height:52px;">
                                    <div style="padding-top: 10px;">
                                        <Icon type="plus-round" size="18" style="color: #aaa"></Icon>
                                    </div>
                                    <div style="font-size:12px; padding-top: -5px;">上传</div>
                                </div>
                            </Upload>
                            <div>(建议上传大小为100×100的图片)</div>
                        </div>
                    </td>
                    <!-- <td>
                        <Input v-model="value" placeholder="请输入详情链接" style="width: 200px"></Input>
                    </td> -->
                </tr>
            </table>
        </Modal>
        <!-- 编辑轮播图 -->
        <Modal v-model="editShufflingList" title="编辑" @on-ok="submitEditShuffling" @on-cancel="cancel" :mask-closable="false">
            <table class="tablePup">
                <tr>
                    <td class="add-left">
                        <span style="color:red">*</span>
                        <span>序号：</span>
                    </td>
                    <td>
                    <Input :min="1" :value="edit_shuffling_index" :max="9999" style="width: 200px" placeholder="请输入序号"></Input>
                    </td>
                </tr>
                <tr>
                    <td class="add-left">
                        <span style="color:red">*</span>
                        <span>标题：</span>
                    </td>
                    <td>
                        <Input v-model="edit_shuffling_title" placeholder="请输入标题" style="width: 200px"></Input>
                    </td>
                </tr>
                <tr>
                    <td class="add-left">
                        <span style="color:red">*</span>
                        <span>状态：</span>
                    </td>
                    <td>
                        <Select v-model="edit_shuffling_status" style="width:200px">
                            <Option v-for="item in shufflingStatus" :value="item.status" :key="item.status" @on-change="shufflingStatusChange()"></Option>
                        </Select>
                    </td>
                </tr>
                <tr>
                    <td class="add-left">
                        <span style="color:red">*</span>
                        <span>封面图片：</span>
                    </td>
                    <td>
                        <div>
                           <div class="demo-upload-list" v-for="item in uploadList">
                                <img :src="item.url">
                           <!-- <div class="demo-upload-list">
                                <img :src="edit_shuffling_pic"> -->
                                <div class="demo-upload-list-cover">
                                    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                                </div>
                            </div>
                            <Upload 
                            ref="upload"
                            :show-upload-list="false" 
                            :on-success="handleSuccess"
                            :format="['jpg','jpeg','png']" 
                            :max-size="5120" 
                            :before-upload="handleBeforeUpload" 
                            :on-format-error="handleFormatError" 
                            :on-exceeded-size="handleMaxSize" 
                            multiple 
                            type="drag" 
                            action="" 
                            style="display: inline-block;width:60px;">
                                <div style="width: 60px;height:58px;">
                                    <div style="padding-top: 10px;">
                                        <Icon type="plus-round" size="18" style="color: #aaa"></Icon>
                                    </div>
                                    <div style="font-size:12px; padding-top: -5px;">上传</div>
                                </div>
                            </Upload>
                            <div>(建议上传大小为100×100的图片)</div>
                        </div>
                    </td>
                    <!-- <td>
                        <Input v-model="edit_shuffling_url" placeholder="请输入详情链接" style="width: 200px"></Input>
                    </td> -->
                </tr>
            </table>
        </Modal>
        <!-- 排序轮播图 -->
        <Modal v-model="sortShufflingList" :mask-closable="false" title="排序(请使用鼠标拖动排序)" @on-ok="submitSortShuffling" @on-cancel="cancel">
            <div class="sortContent">
                <div class="sortTitle"><div>标题</div><div>序号</div></div>
                <draggable v-model="sortList" :options="{draggable:'.item'}" class="drag">
                    <!-- <div></div> -->
                    <div v-for="element in sortList" :key="element.id" class="item">
                        <div>{{element.TITLE}}</div>
                        <div>{{element.OREDER_NUMBER}}</div>
                        <!-- {{element.TITLE}} -->
                    </div>
                    <!-- <button slot="footer" @click="addPeople">Add</button> -->
                </draggable>
            </div>
        </Modal>
        <!-- 修改轮播图停留时间 -->
        <Modal v-model="shufflingKeepTime" :mask-closable="false" title="停留时间">
            <p>
                <span>请输入时间：</span>
                <Input :min="1" :max="9999" :value="keepTime" style="width: 200px" placeholder="请输入整数数字" autofocus @on-enter="submitKeepTime"></Input>
                <span style="color: #aaa">(秒)</span>
            </p>
        </Modal>
    </div>
</template>

<script>
export default {
    data() {
        return {
            addShufflingList: false,
            editShufflingList: false,
            sortShufflingList: false,
            shufflingKeepTime: false,
            shufflingTable: [
                {
                    title: '轮播图',
                    align: 'center',
                    key: 'PICTURE',
                    render: (h, params) => {
                        return h('img', {
                            attrs: {
                                'src': params.row.PICTURE,
                                'width': '100%',
                                'height': '50px',
                                'style': 'margin-top:5px;'
                            }
                        })
                    }
                },
                {
                    title: '序号',
                    align: 'center',
                    key: 'OREDER_NUMBER'
                },
                {
                    title: '标题',
                    align: 'center',
                    key: 'TITLE'
                },
                {
                    title: '更新时间',
                    align: 'center',
                    key: 'UPDATE_TIME'
                },
                {
                    title: '链接',
                    align: 'center',
                    key: 'LINK'
                },
                {
                    title: '状态',
                    align: 'center',
                    key: 'STATUS'
                },
                {
                    title: '操作',
                    key: '11',
                    align: 'center',
                    width: '120px',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'a',
                                {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.editShuffling(params)
                                        }
                                    }
                                },
                                '编辑'
                            ),
                            h(
                                'a',
                                {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteShuffling(params)
                                        }
                                    }
                                },
                                '删除'
                            )
                        ])
                    }
                }
            ],
            shufflingStatus: [
                {
                    status: '是',
                    value: true
                },
                {
                    status: '否',
                    value: true
                }
            ],
            edit_shuffling_index: '',
            edit_shuffling_title: '',
            edit_shuffling_status: '',
            edit_shuffling_pic: '',
            edit_shuffling_url: '',
            edit_shuffling_id: '',
            file: [{url: '', name: ''}],
            loading: false,
            value: '',
            uploadList: [],
            uploadUrl: '',
            keepTime: 2,
            shufflingTotal: 1,
            shufflingCurrent: 1,
            shufflingPageSize: 10
        }
    },
    created() {
        this.uploadUrl = this.$store.state.uploadUrl
        console.log(this.uploadUrl)
        this.getShufflingList()
    },
    computed: {
        shufflingTableData() {
            return this.$store.state.shufflingList
        },
        sortList: {
            get() {
                return this.$store.state.sortList
            },
            set(value) {
                this.$store.commit('SET_updateSortList', value)
                console.log(this.$store.state.updateSortList)
            }
        }
    },
    methods: {
        handleBeforeUpload(file) {
            // 创建一个 FileReader 对象
            let reader = new FileReader()
            // readAsDataURL 方法用于读取指定 Blob 或 File 的内容
            // 当读操作完成，readyState 变为 DONE，loadend 被触发，此时 result 属性包含数据：URL（以 base64 编码的字符串表示文件的数据）
            // 读取文件作为 URL 可访问地址
            reader.readAsDataURL(file)
            const _this = this
            const check = this.uploadList.length < 1
            if (!check) {
                this.$Message.warning({
                    content: '单次只能上传一张图片.'
                })
            } else {
                reader.onloadend = function(e) {
                    file.url = reader.result
                    _this.uploadList.push(file)
                    console.log(_this.uploadList)
                }
            }
            return check
        },
        handleRemove(file) {
            const fileList = this.$refs.upload.fileList
            this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
        },
        handleSuccess(response) {
            if (response.status === 1000) {
                console.log('llllll-----', response.status)
                this.edit_shuffling_pic = response.result
                // this.uploadList = ''
            } else {
                this.$Message.warning({
                    content: response.msg,
                    duration: this.durationTime
                })
            }
        },
        handleFormatError(file) {
            console.log(file)
            let Vm = this
            Vm.$Message.warning({
                content: '文件格式不正确，请上传 jpg 或 png 格式的图片',
                duration: Vm.durationTime
            })
        },
        handleMaxSize(file) {
            this.$Message.warning({
                content: '文件大小应小于5M',
                duration: this.durationTime
            })
        },
        changePage(current) {
            // this.$store.commit('SET_page', current)
            this.shufflingCurrent = current
            this.getShufflingList()
        },
        changePageSize(shufflingPageSize) {
            console.log(shufflingPageSize)
            this.shufflingPageSize = shufflingPageSize
            this.getShufflingList()
        },
        getShufflingList() {
            const Vm = this
            Vm.$store.dispatch('getAllShuffling', {
                pageNum: Vm.shufflingCurrent,
                pageSize: Vm.shufflingPageSize
            })
                .then(res => {
                    console.log(res)
                    if (res.data.status === 1000) {
                        let tempObj = []
                        try {
                            res.data.result.map((item) => {
                                let status = ''
                                if (item.shufflingStatus) {
                                    status = '已上线'
                                } else {
                                    status = '未上线'
                                }
                                // 截取时间字符串
                                item.updateDateString = item.updateDateString.slice(0, 10)
                                // console.log(item.updateDateString)
                                let a = {
                                    ID: item.id,
                                    PICTURE: item.imgUrl,
                                    OREDER_NUMBER: item.shufflingNum,
                                    TITLE: item.title,
                                    LINK: item.url,
                                    UPDATE_TIME: item.updateDateString,
                                    STATUS: status,
                                }
                                tempObj.push(a)
                            })
                            Vm.$store.commit('SET_sortList', Vm.$store.state.shufflingList)
                            console.log(tempObj)
                            // return tempObj
                        } catch (err) {}
                        Vm.$store.commit('SET_shufflingList', res.data.result)
                        Vm.shufflingTotal = res.data.total
                    } else {
                        this.$Message.info({
                            content: res.data.msg,
                            duration: 5
                        })
                    }
                })
        },
        remove(index) {
            this.data6.splice(index, 1)
        },
        addShuffling() {
            this.addShufflingList = true
            this.uploadList.url = ''
            this.uploadList.name = ''
        },
        editShuffling(params) {
            console.log(params)
            let shufflingObj = params.row
            if (shufflingObj.STATUS === '已上线') {
                this.edit_shuffling_status = '是'
            } else {
                this.edit_shuffling_status = '否'
            }
            this.edit_shuffling_index = shufflingObj.OREDER_NUMBER
            this.edit_shuffling_title = shufflingObj.TITLE
            this.edit_shuffling_pic = shufflingObj.PICTURE
            this.edit_shuffling_url = shufflingObj.LINK
            this.edit_shuffling_id = shufflingObj.ID
            this.file.url = shufflingObj.PICTURE
            this.uploadList.push(this.file)
            console.log(this.uploadList)
            this.editShufflingList = true
            console.log(this.edit_shuffling_pic)
        },
        editShufflingKeepTime() {
            this.shufflingKeepTime = true
        },
        deleteShuffling(params) {
            const Vm = this
            Vm.$store.dispatch('deleteShuffling', {
                id: params.row.ID
            }).then(res => {
                if (res.data.status === 1000) {
                    Vm.$Message.info({
                        content: res.data.msg,
                        duration: 3
                    })
                    Vm.getShufflingList()
                } else {
                    Vm.$Message.info({
                        content: res.data.msg,
                        duration: 3
                    })
                }
            })
        },
        sortShuffling() {
            console.log('from', this.$store.state.sortList)
            this.sortShufflingList = true
        },
        submitAddShuffling() {
            console.log(this.uploadList.url)
            this.uploadList = ''
        },
        submitEditShuffling() {},
        submitSortShuffling() {},
        submitKeepTime() {},
        cancel() {
            // this.uploadList = ''
        },
        shufflingStatusChange() {}
    }
}
</script>

<style lang="less" scoped>
.shuffling {
    width: 100%;
    .topTableStyle {
        width: 100%;
        margin-bottom: 10px;
    }
}
td.add-left {
    text-align: right;
}
.tablePup {
    tr {
        margin-bottom: 5px;
        line-height: 40px;
    }
    tr:nth-child(4) {
        line-height: 15px;
    }
}
.bottom {
    padding-top: 20px;
}
.demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
}

.demo-upload-list img {
    width: 100%;
    height: 100%;
}

.demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
}

.demo-upload-list:hover .demo-upload-list-cover {
    display: block;
}

.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
.sortContent {
    width: 100%;
    // background: orange;
    .sortTitle {
        width: 100%;
        height: 30px;
        display: flex;
        flex-direction: columnl;
        line-height: 30px;
        font-weight: 600;
        // margin-bottom: 10px;
        div {
            // display: flex;
            // flex-direction: row;
            text-align: center;
            width: 50%;
        }
    }
    .drag {
        // background: papayawhip;
        width: 100%;
        overflow-y: auto;
        .item {
            width: 100%;
            display: flex;
            height: 25px;
            flex-direction: columnl;
            overflow-y: auto;
            div {
                text-align: center;
                width: 50%;
                line-height: 25px;
            }
        }
    }
}
// .loadingData {
//     margin-top: 10px !important;
// }
</style>
